<!-- 核酸登记-个人信息 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box">
			<view class="nl-flex-list">
				<text class="room">{{item.roomName}}</text>
				<view class="botton-flex">
					<view class="button-mini red" v-if="updateShow == false">
						<button @click="deleteShow = true">删除</button>
					</view>
					<view class="button-mini main m8" v-if="updateShow == false">
						<button @click="updateShow = true">修改</button>
					</view>
					<view class="button-mini red m8" v-if="updateShow == true">
						<button @click="updateShow = false">取消</button>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="name">{{item.userName}}</view>
				<view class="right">
					<view>
						<text>电话：</text>
						<text class="phone" selectable="true">{{item.tel}}</text>
					</view>
					<view>
						<text>核酸状态：</text>
						<text :class="item.state == 1 ? 'red' : item.state == 2 ? 'green':'grey'">{{item.stateName}}</text>
					</view>
				</view>
			</view>
			
			<view class="edit-box" v-if="updateShow == true">
				<view class="nl-flex-list" @click="selectFloor()">
					<text class="nl-margin-right">选择楼栋</text>
					<view :class="editItem.floorName ? 'right':'right-grey'">
						{{editItem.floorName ? editItem.floorName : '请选择楼栋'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="selectUnit()">
					<text class="nl-margin-right">选择单元</text>
					<view :class="editItem.unitNum ? 'right':'right-grey'">
						{{editItem.unitNum ? editItem.unitNum : '请选择单元'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="selectRoom()">
					<text class="nl-margin-right">选择房屋</text>
					<view :class="editItem.roomNum ? 'right':'right-grey'">
						{{editItem.roomNum ? editItem.roomNum : '请选择房屋'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				
				<view class="nl-flex-list">
					<text class="nl-margin-right">姓名</text>
					<u-input class="input" v-model="editItem.userName" type="text" placeholder="请输入用户姓名" />
				</view>
				
				<view class="nl-flex-list">
					<text class="nl-margin-right">电话</text>
					<u-input class="input" v-model="editItem.tel" type="number" placeholder="请输入用户电话" />
				</view>
				
				<view class="button-lg" @click="editRegister()">
					<button>确认修改</button>
				</view>
			</view>
		</view>

		<view class="nl-shadow-box code">
			<view class="title">检测二维码</view>
			<view class="button-mini main code-btn">
				<button @click="saveCode()">保存</button>
			</view>
			<view class="qrcode">
				<tki-qrcode ref="qrcode" :cid="qrcode.cid" :val="qrcode.val" :size="qrcode.size" :unit="qrcode.unit"
					:background="qrcode.background" :foreground="qrcode.foreground" :pdground="qrcode.pdground"
					:icon="qrcode.icon" :iconSize="qrcode.iconsize" :lv="qrcode.lv" :onval="qrcode.onval"
					:loadMake="qrcode.loadMake" :usingComponents="qrcode.usingComponents"
					:showLoading="qrcode.showLoading" :loadingText="qrcode.loadingText" />
			</view>
		</view>

		<u-modal v-model="deleteShow" @confirm="deleteConfirm" ref="uModal" content="是否删除该用户？" show-cancel-button>
		</u-modal>
		<view class="mask" v-if="maskShow"></view>
		
		<u-picker mode="selector" v-model="floorShow" :default-selector="[0]" :range="floorList" @confirm="confirmFloor"
			range-key="floorName"></u-picker>
		
		<u-picker mode="selector" v-model="unitShow" :default-selector="[0]" :range="unitList" @confirm="confirmUnit"
			range-key="unitNum"></u-picker>
		
		<u-picker mode="selector" v-model="roomShow" :default-selector="[0]" :range="roomList" @confirm="confirmRoom"
			range-key="roomNum"></u-picker>
			
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import {
		mapState
	} from 'vuex';
	import {
		getRoomInfomartion
	} from "@/api/room.js"
	import {
		getQueryFloors,
		getQueryUnits
	} from "@/api/common"
	import {
		deleteNucleicUser,
		updateNucleicUser,
		queryNucleicUser
	} from '@/api/nucleic.js';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				
				maskShow:false,
				updateShow:false,
				
				item: {},
				editItem:{},
				maskShow: false,
				deleteShow: false,
				
				floorList: [],
				floorShow: false,
				
				unitList: [],
				unitShow: false,
				
				roomList: [],
				roomShow: false,
				
				qrcode: {
					cid: 'tki-qrcode-canvas', // 二维码唯一ID
					val: {}, // 要生成的二维码值
					size: 400, // 二维码大小
					unit: 'upx', // 单位
					background: '#000', // 背景色
					foreground: '#ffffff', // 前景色
					pdground: '#ffffff', // 角标色
					icon: '/static/logo.png', // 二维码图标 二维码中心的icon图标
					iconsize: 60, // 二维码中心icon图标大小
					lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
					onval: true, // val值变化时是否自动重新生成二维码
					loadMake: true, // 组件加载完成后是否自动生成二维码
					src: '', // 二维码生成后的图片地址或base64
					usingComponents: false, // 是否使用了自定义组件模式
					showLoading: true, // 是否显示loading
					loadingText: '二维码生成中', // loading展示文案
				}
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.data)
			this.editItem = JSON.parse(option.data)
			this.qrcode.val = JSON.parse(option.data).id
		},
		onBackPress(){
			
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			/**
			 * 楼栋
			 */
			selectFloor() {
				this.queryFloor()
			},
			queryFloor() {
				let params = {
					communityId: this.userCommunity.communityId,
					page: 1,
					row: 100
				}
				getQueryFloors(params).then((res) => {
					this.floorList = res.apiFloorDataVoList
					this.floorShow = true
				}).catch(function(reason) {
			
				})
			},
			confirmFloor(e) {
				let i = e[0]
				this.editItem.floorName = this.floorList[i].floorName
				this.editItem.floorId = this.floorList[i].floorId
			
				this.unitList = []
				this.editItem.unitId = ''
				this.editItem.unitNum = ''
				this.roomList = []
				this.editItem.roomNum = ''
				this.editItem.roomId = ''
			},
			/**
			 * 单元
			 */
			selectUnit() {
				if (!this.editItem.floorName) {
					uni.showToast({
						title: "请选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}
			
				this.queryUnit()
			},
			queryUnit() {
				let params = {
					communityId: this.userCommunity.communityId, //小区编号
					floorId: this.editItem.floorId,
					name: '',
					page: 1,
					row: 100
				}
				getQueryUnits(params).then((res) => {
					this.unitList = res
					this.unitShow = true
				}).catch(function(reason) {
			
				})
			},
			confirmUnit(e) {
				let i = e[0]
				this.editItem.unitNum = this.unitList[i].unitNum
				this.editItem.unitId = this.unitList[i].unitId
				
				this.roomList = []
				this.editItem.roomNum = ''
				this.editItem.roomId = ''
			},
			/**
			 * 房屋
			 */
			selectRoom() {
				if (!this.editItem.unitNum) {
					uni.showToast({
						title: "请选择单元",
						icon: 'none',
						duration: 1500
					})
					return
				}
			
				this.queryRoom()
			},
			queryRoom() {
				uni.showLoading({
					title: '加载房屋中',
					mask: true
				});
				let params = {
					communityId: this.userCommunity.communityId,
					floorId: this.editItem.floorId,
					unitId: this.editItem.unitId,
					page: 1,
					row: 999,
				}
				getRoomInfomartion(params).then((res) => {
					if (res.total > 0) {
						this.roomList = res.rooms
						this.roomShow = true
						uni.hideLoading()
					} else {
						uni.showToast({
							title: "该单元暂无房屋",
							icon: 'none',
							duration: 1500
						})
						return
					}
			
				}).catch(function(reason) {
			
				})
			},
			confirmRoom(e) {
				let i = e[0]
				this.editItem.roomNum = this.roomList[i].roomNum
				this.editItem.roomId = this.roomList[i].roomId
				this.editItem.layerNum = []
				for (let n = 0; n < Number(this.roomList[i].layerCount); n++) {
					this.editItem.layerNum.push(n + 1)
				}
			},
			/**
			 * 确认修改
			 */
			editRegister() {
				this.$refs.uToast.show({
					title: '修改中，请稍等',
					type: 'default',
					icon: false
				})
				this.maskShow = true
				let parmas = {
					id: this.editItem.id,
					roomId: this.editItem.roomId,
					userName: this.editItem.userName,
					tel: this.editItem.tel,
				}

				updateNucleicUser(parmas).then((res) => {
					if (res.code == 0) {

						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
						})
						
						this.queryNucleicUser()
						
					} else if (res.code == 404) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
					this.maskShow = false
				}).catch(function(reason) {
					this.maskShow = false
				})
			},
			/**
			 * 查询用户信息
			 */
			queryNucleicUser(){
				let parmas = {
					communityId:this.userCommunity.communityId,
					id:this.item.id
				}
				
				queryNucleicUser(parmas).then((res)=>{
					if(res.code == 0){
						this.item = res.data[0].rooms[0].users[0]
						this.item['layerNum'] = this.editItem.layerNum
						this.updateShow = false
						this.gobackInfo()
					}
					
				}).catch(function(reason){
					
				})
			},
			/**
			 * 删除
			 */
			deleteConfirm() {
				this.$refs.uToast.show({
					title: `删除中，请稍等`,
					type: 'default',
					icon: false
				})
				this.maskShow = true
				let parmas = {
					id: this.item.id
				}
				deleteNucleicUser(parmas).then((res) => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: `用户已删除`,
							type: 'success',
						})
					}
					
					this.gobackInfo()
					uni.navigateBack({
						delta: 1
					})
			
					this.maskShow = false
				}).catch(function(reason) {
					this.maskShow = false
				})
			},
			gobackInfo(){
				let pages = getCurrentPages()
				let nowPage = pages[pages.length - 1]
				let prePage = pages[pages.length - 2]
				prePage.$vm.floorName = this.item.floorName
				prePage.$vm.floorId = this.item.floorId
				prePage.$vm.unitNum = this.item.unitNum
				prePage.$vm.unitId = this.item.unitId
				prePage.$vm.layerNum = this.item.layerNum
				
				prePage.$vm.addRegisterFn = true
			},
			/**
			 * 保存二维码
			 */
			saveCode() {
				this.$refs.qrcode._saveCode()
			},
		}
	}
</script>

<style lang="scss">
	.nl-flex-list {
		padding: 0 32rpx;

		.room {
			font-size: 32rpx;
		}

		.botton-flex {
			height: 56rpx;
			margin-left: auto;
		}
	}

	.info {
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;

		.name {
			font-size: 40rpx;
		}

		.right {
			margin-left: auto;

			view:nth-child(1) {
				margin-bottom: 16rpx;

				.phone {
					color: $nl-color-main;
				}
			}

			.red {
				color: $uni-color-error;
			}

			.green {
				color: $uni-color-success;
			}

			.grey {
				color: #666;
			}
		}
	}

	.code {
		margin-top: 40rpx;
		position: relative;

		.title {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 2rpx solid $uni-bg-color-grey;

		}

		.qrcode {
			width: 100%;
			height: 480rpx;
			text-align: center;
			padding: 40rpx;
		}

		.code-btn {
			position: absolute;
			top: 22rpx;
			right: 32rpx;
		}
	}
	
	.mask {
		width: 100%;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}
</style>
